<template>
  <div class="basic-config-container">
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="180px"
      class="config-form"
    >
      <el-form-item label="系统名称" prop="systemName">
        <el-input v-model="form.systemName" placeholder="请输入系统名称"></el-input>
      </el-form-item>
      
      <el-form-item label="管理员邮箱" prop="adminEmail">
        <el-input v-model="form.adminEmail" placeholder="请输入管理员邮箱"></el-input>
      </el-form-item>
      
      <el-form-item label="系统描述" prop="description">
        <el-input
          v-model="form.description"
          type="textarea"
          placeholder="请输入系统描述"
          :rows="3"
        ></el-input>
      </el-form-item>
      
      <el-form-item label="允许注册" prop="allowRegister">
        <el-switch v-model="form.allowRegister"></el-switch>
      </el-form-item>
      <el-form-item label="密码错误重试次数" prop="passwordErrorRetry">
        <el-input-number v-model="form.passwordErrorRetry" :min="1" :max="100"></el-input-number>
      </el-form-item>
      <el-form-item label="日志保留天数" prop="logRetentionDays">
        <el-input-number v-model="form.logRetentionDays" :min="1" :max="365"></el-input-number>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="submitForm">保存配置</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import requestUtil from '@/util/request'
import { ElMessage } from 'element-plus'

const formRef = ref(null)
const form = ref({
  systemName: '',
  adminEmail: '',
  description: '',
  allowRegister: false,
  passwordErrorRetry: 5,  // 密码错误重试次数
  logRetentionDays: 30
})

// 表单验证规则
const rules = {
  systemName: [
    { required: true, message: '请输入系统名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  adminEmail: [
    { required: true, message: '请输入管理员邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  passwordErrorRetry: [
    { required: true, message: '请输入密码错误重试次数', trigger: 'blur' }
  ],
  logRetentionDays: [
    { required: true, message: '请输入日志保留天数', trigger: 'blur' }
  ]
}

// 加载配置数据
const loadConfig = async () => {
  try {
    // 获取基本配置数据
    const res = await requestUtil.get("system/config?name=basic");
    if (res) {
      console.log('原始返回数据:', res)
      
      // 解析 json_value 字段
      let configData = {}
      if (res.json_value) {
        // 如果 json_value 是字符串，解析它
        if (typeof res.json_value === 'string') {
          configData = JSON.parse(res.json_value)
        } else {
          // 如果已经是对象，直接使用
          configData = res.json_value
        }
      }
      
      console.log('解析后的配置数据:', configData)
      
      // 更新表单数据
      form.value = {
        ...form.value,
        ...configData
      }
      
      console.log('表单数据:', form.value)
    }
  } catch (error) {
    console.error('获取配置失败', error)
    ElMessage.error('获取配置失败')
  }
}

// 提交表单
const submitForm = () => {
  if (!formRef.value) return
  
  formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        // 保存基本配置
        await requestUtil.post('system/config?name=basic', form.value)
        ElMessage.success('配置保存成功')
      } catch (error) {
        console.error('保存配置失败', error)
        ElMessage.error('保存配置失败')
      }
    } else {
      return false
    }
  })
}

// 重置表单
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
}

// 组件挂载时加载配置
onMounted(() => {
  loadConfig()
})
</script>

<style lang="scss" scoped>
.basic-config-container {
  padding: 20px;
}

.config-form {
  max-width: 600px;
  margin: 0 auto;
}
</style>
